<template>
  <div class="app">
    <banner></banner>
    <div style="padding-bottom: 80px">
      <div
        v-for="item in article"
        :key="item.index"
        @click="hanDetail(item._id)"
      >
        <div style="display: flex; margin: 20px 0">
          <img class="avater" :src="item.avatar" alt="" />
          <p class="tt" style="color: #333">{{ item.author }}</p>
          <p class="tt">{{ item.date }}</p>
        </div>
        <h2 class="title">{{ item.title }}</h2>
        <img class="pic" :src="item.headImgSrc" alt="" />
        <p class="content">{{ item.content }}</p>
        <div class="more">
          <span>评论:{{ item.collectNum }}</span>

          <span>已读:{{ item.reading }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "./components/banner.vue";
export default {
  data() {
    return {
      article: [],
    };
  },
  components: {
    Banner,
  },
  mounted() {
    this.$http("http://47.108.197.28:4000/api/article").then((res) => {
      this.article = res.data.res;
    });
  },
  methods: {
    hanDetail(id) {
      this.$router.push(`/articleDetail/${id}`);
    },
  },
};
</script>

<style scoped>
.app {
  width: 10rem;
  overflow: hidden;
  margin: auto;
}
.pic {
  width: 750px;
}
.title {
  text-align: left;
}
.avater {
  width: 60px;
}
.tt {
  line-height: 60px;
  margin-right: 10px;
  color: #b2b2b2;
  font-size: 26px;
}
.more {
  text-align: left;
  font-size: 12px !important;
}
.content {
  text-align: left;
  color: #b0b0b0;
  font-size: 22px;
}
</style>